<template>
  <section>
    <div class="active-miaosha">
      <p class="tool_name">生成sn<span style="color: red;">(官方使用......请勿操作)</span></p>

      <div class="select-area">
        <span style="display: inline-block;width: 300px;">
          <el-select v-model="params.area_name" placeholder="请选择大区域" size="large" @change="changeSelectArea">
            <el-option
              v-for="(item, index) in areaNames"
              :key="index"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </span>
        <span><el-button size="large" type="warning" @click="suer_select">确认选择</el-button></span>
        <p style="margin-top: 20px;">
          <!--<el-transfer v-model="checkedName" :data="area_name_data"></el-transfer>-->
          <el-select v-model="checkedName" multiple placeholder="选择小区域" size="large">
            <el-option v-for="(item, index) in area_name_data" :key="item.value" :label="item.label" :value="item.label"></el-option>
          </el-select>
        </p>
      </div>

      <div>
        <li v-for="(item, index) in checkedAreas">
          <p>{{ item.area_name }}</p>
          <span class="c-area" v-for="(_name, _index) in item.name">{{ _name }}</span>
          <span class="c-area d-area" @click="delete_area(index)">取消</span>
        </li>
        <p style="margin-top: 20px;">
          <el-button type="success" @click="create_sn">生成sn</el-button>
        </p>

      </div>

    </div>
  </section>
</template>

<script type="text/ecmascript-6">
  import util from '../../util'
  import { apiTree } from '../../apiTree'

  export default {
    data() {
      return {
        area_name_data: [],
        checkedName: [],
        params: {
          area_name: ''
        },
        areaNames: [],
        checkedAreas: []
      }
    },
    methods: {
      // 获得区域名
      getAreaName() {
        this.areaName = []
        apiTree('test/index', 'field/getAreaName', {}).then((res) => {
          if (res.s === 1) {
            res.d.data.forEach((item) => {
              this.areaNames.push(item.area_name)
            });
          }
        })
      },
      // 获得区域名
      changeSelectArea() {
        apiTree('test/index', 'tools/getSingleAreaName', this.params).then((res) => {
          if (res.s === 1) {
            res.d.data.forEach((item, index) => {
              this.checkedName = [];
              this.area_name_data.push({
                value: item.id,
                label: item.name
              });
            })
          }
        })
      },
      // 确认选择
      suer_select() {
        if (util.isEmpty(this.checkedName)) {
          this.$message.error('未选择地块!');
          return
        }
        let _name = this.params.area_name;
        this.checkedAreas.push({ area_name: _name, name: this.checkedName });
      },
      // 删除已经选择的区域
      delete_area(_index) {
        this.checkedAreas.splice(_index, 1);
      },
      // 创建收菜的sn文件
      create_sn() {
        let params = {'data': this.checkedAreas}
        apiTree('test/index', 'tools/createCollectSn', params, 'POST').then((res) => {

        });
      }
    },
    created() {
      this.getAreaName();
    }
  }
</script>

<style lang="scss">
  li {
    list-style: none;
  }
  .active-miaosha {
    width: 1000px;
    padding: 20px;
    margin-top: 10px;
    border: 1px solid #13ce66;
    overflow: hidden;
    float: left;
  }
  .area-item {
    display: inline-block;
  }
  .c-area {
    display: inline-block;
    width: 40px;
    height: 30px;
    line-height: 30px;
    text-align: center;
  }
  .d-area {
    color: white;
    background: #F84461;
    border-radius: 5px;
    cursor: pointer;
  }
  .tool_name {
    height: 40px;
    line-height: 40px;
    color: #11b95c;
    text-indent: 6px;
    font-size: 18px;
  }
</style>